<template>
  <!-- 预览文章 -->
  <div class="container">
    <!-- 点击预览的对话框 -->
    <!-- 主体内容 -->
    <el-form ref="closeRef">
      <el-form-item>
        <h2>{{ articleIds.title }}</h2>
      </el-form-item>
      <el-form-item>
        <div class="title">
          <span
            >{{
              articleIds.createTime
                | parseTimeByString('{y}-{m}-{d} {h}:{mm}:{s}')
            }}
          </span>
          <span>{{ articleIds.username }}</span>
          <i class="el-icon-view"></i>
          <span>{{ articleIds.visits }}</span>
        </div>
      </el-form-item>
      <el-form-item>
        <div class="content" v-html="articleIds.articleBody"></div>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="previewClickClose">取 消</el-button>
      <el-button type="primary" @click="previewClickClose">确 定</el-button>
    </span>
  </div>
</template>

<script>
export default {
  name: 'articlePreview',
  components: {},
  props: {
    articleIds: {
      type: Object
    }
  },
  data () {
    return {
      // article: {}
    }
  },
  computed: {},
  watch: {},
  methods: {
    // close事件
    previewClickClose () {
      this.$emit('success')
    }
  },
  created () {},
  mounted () {}
}
</script>

<style lang="scss" scoped>
.container {
  .title {
    span {
      padding: 10px;
    }
  }
  .content {
    padding: 10px;
    border-top: 1px dashed #ccc;
    background: #f5f5f5;
  }
}
</style>
